<%@ page language="java" import="java.util.*,com.opensymphony.xwork2.util.*" 
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>  

<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/main.css">    
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<title>HIFO</title>

<script type="text/javascript">
<%
ValueStack vs=(ValueStack)request.getAttribute("struts.valueStack");
String myjson=(String)vs.findValue("cjsons");
%>
var client_json=<%=myjson%>

</script>
</head>
<body>
<%@ include file="_daohang.jsp" %>	

<!-- client-table START	-->
<div class="bs-example" data-example-id="simple-table">

<table class="table" id="client-table">

<thead>
<tr>
<th style="width:30px"></th>
<th>姓名</th>
<th>区域</th>
<th></th>
<th style="width:90px">达成期限</th>
</tr>
</thead>
<tbody>

<s:iterator value="clientList" status="st" id="c" > 
<tr onclick="a(this)">
<th scope="row"><img class="home" src="images/recommend.png"></th>
<td><s:property value="#c.clientBase.name"/></td>
<td><s:property value='#c.clientBase.city'/>|<s:property value='#c.clientBase.area'/></td>
<td>
		<s:if test='#c.clientExtend.clientType=="b"'>
		&chi;
		</s:if>
		<s:elseif test='#c.clientExtend.clientType=="c"'>
		&clubs;
		</s:elseif>
		<s:elseif test='#c.clientExtend.clientType=="d"'>
		&diams;
		</s:elseif>
		<s:elseif test='#c.clientExtend.clientType=="e"'>
		&spades;
		</s:elseif>

</td>
<td>
<!--进度条 百分比代表进度-->
<div class="progress jdt"> <div class="progress-bar" role="progressbar" 
aria-valuemin="0" aria-valuemax="100" style="width:<s:property value='#c.sellPlanRate'/>%;"></div></div>
</td>
</tr>
</s:iterator>

<!--  
<tr>
<th scope="row"><img class="home" src="images/deal.png"></th>
<td>Mark</td>
<td>金牛区</td>
<td><img class="home" src="images/sun.png"></td>
<td>
-->
<!--如果过期即为负数 或者没有设置则为空 默认按照达成期限来倒序排列  -->
<!-- 
</td>
</tr>
-->
</tbody>
</table>
</div><!-- /example -->				
<!--client-table END	-->				
								
				
				
<!-- 按钮触发模态框  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title" id="myModalLabel">客户详情</h5>
</div>
<div class="modal-body">
<!--此处可以加入很多信息 START-->   
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h5 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          基本信息
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body khdetail" id="client-base">           
    
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          扩展信息
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body khdetail" id="client-extend">

      </div>
    </div>
  </div>
</div>          
    
<a href="#" class="btn btn-warning">计划</a>
<a href="#" class="btn btn-danger">行动</a> 
<!-- <a href="tel:139xxxxxxxx" class="btn btn-success">电话</a> -->
<a href="#" class="btn btn-success">已阅</a>
  
<!--此处可以加入很多信息 END-->     
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--<a href="#" class="btn btn-primary">新增</a> -->
<a href="#" class="btn btn-primary">修改</a> 
<!--<a href="#" class="btn btn-primary">作废</a>暂时不考虑作废功能，不管他就会自动作废 -->
<!--<button type="button" class="btn btn-primary">修改</button>-->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
//默认显示模态框
$(function () { 
//alert(client_json[0].clientBase.name);
//$('#myModal').modal('show');
});

// 获取点击的行数
function a(a){
i=a.rowIndex-1;
jcb=client_json[i].clientBase;
jce=client_json[i].clientExtend;
//alert(i);
//alert(client_json[i].clientBase);

$('#client-base').html(jcb);
$('#client-extend').html(jce);
$('#myModal').modal('show');
}

</script>
			

</body>
</html>